<!--
 * @Descripttion: 交接小结
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-20 14:22:41
 * @LastEditTime: 2021-08-21 16:15:58
-->
<template>
    <div id="handOver">
        <!-- <van-nav-bar  title="运维工作日志" left-arrow @click-left="back"/> -->
        <Theader title="运维工作日志" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
            :titleStyle="{color:'#333'}">
            <template slot="header_arrow">
                <van-icon size="17" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <!-- 基本信息 -->
        <div class="assets-box">
            <div class="assets-container">
                <div class="container-title">
                    <img src="../../images/icon_pm_title.png"
                        style="padding-right: 1rem;height:1.0625rem;width:1.0625rem;">
                    <span>基本信息</span>
                </div>
                <div class="container-text">
                    <van-cell-group>
                        <van-cell title="运维班(站)" value="花园山变电站运维班"></van-cell>
                        <van-cell title="日期" value="2021/05/25"></van-cell>
                        <van-cell title="星期" value="星期日"></van-cell>
                        <van-cell title="天气" value="晴"></van-cell>
                        <van-cell title="当值接班终了时间" value="2021/04/05 12:30"></van-cell>
                        <van-cell title="当值交班终了时间" value="2021/04/06 12:30"></van-cell>
                        <van-cell title="交班人" value="钱宏伟、唐玮良"></van-cell>
                        <van-cell title="接班人" value="严琪、李晓磊"></van-cell>
                    </van-cell-group>
                </div>
            </div>
        </div>

        <!-- 运行方式 -->
        <div class="assets-box">
            <div class="assets-container">
                <div class="container-title">
                    <img src="../../images/icon_pm_title.png"
                        style="padding-right: 1rem;height:1.0625rem;width:1.0625rem;">
                    <span>运行方式</span>
                </div>
                <div class="container-text">
                    <div class="operation-mode">
                        <van-cell-group>
                            <van-cell value="一次运方"></van-cell>
                            <van-cell>
                                <template #title>
                                    <span>向阳变：</span>
                                    <span>421电瓷线线路检修</span>
                                </template>
                            </van-cell>
                            <van-cell>
                                <template #title>
                                    <span>虎丘变：</span>
                                    <span>122虎池线线路检修</span>
                                </template>
                            </van-cell>
                            <van-cell value="二次运方"></van-cell>
                            <van-cell>
                                <template #title>
                                    <span>虎丘变：</span>
                                    <span>421电瓷线线路检修</span>
                                </template>
                            </van-cell>
                            <van-cell>
                                <template #title>
                                    <span>向阳变：</span>
                                    <span>122虎池线线路检修</span>
                                </template>
                            </van-cell>
                        </van-cell-group>

                    </div>
                </div>
            </div>
        </div>

        <!-- 运行记事 -->
        <div class="assets-box">
            <div class="assets-container">
                <div class="container-title">
                    <img src="../../images/icon_pm_title.png"
                        style="padding-right: 1rem;height:1.0625rem;width:1.0625rem;">
                    <span>运行记事</span>
                </div>
                <div class="container-text">
                    <div class="operation-mode">
                        <van-cell value="巡视工作"></van-cell>
                        <van-row>
                            <van-col :span='8'>日期</van-col>
                            <van-col :span='16'>内容</van-col>
                        </van-row>
                        <van-row>
                            <van-col :span='8'>2021/05/21</van-col>
                            <van-col :span='16'>东渚变：11E3渚电线开关小修、保护定校(已终结)</van-col>
                        </van-row>
                        <van-row>
                            <van-col :span='8'>2021/05/21</van-col>
                            <van-col :span='16'>金山变：国庆运行方式调整(1张 已执行)</van-col>
                        </van-row>
                    </div>
                    <div class="operation-mode">
                        <van-cell value="工作票执行情况"></van-cell>
                        <van-row>
                            <van-col :span='8'>日期</van-col>
                            <van-col :span='16'>内容</van-col>
                        </van-row>
                        <van-row>
                            <van-col :span='8'>2021/05/21</van-col>
                            <van-col :span='16'>东渚变：11E3渚电线开关小修、保护定校(已终结)</van-col>
                        </van-row>
                        <van-row>
                            <van-col :span='8'>2021/05/21</van-col>
                            <van-col :span='16'>金山变：国庆运行方式调整(1张 已执行)</van-col>
                        </van-row>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-box">
            <button class="confirm-btn">导出</button>
        </div>
    </div>
</template>

<script>
    import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
        data() {
            return {

            }
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.push({
                    name: 'dutyHome'
                })
            },
        }
    }
</script>

<style>
    #handOver .assets-box {
        /* height: calc(100vh - 66px); */
        padding: 10px;
        background: #F5F6F7;
    }

    #handOver .assets-container {
        /* height: calc(100% - 3rem); */
        /* overflow: auto; */
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        background-image: url(../../images/image_pm_form_bg.png);
        background-size: 100% 100%;
    }

    #handOver .container-title {
        font-size: 1.0625rem;
        padding: 1rem;
        display: flex;
        align-items: center;
    }

    #handOver .container-text {
        font-size: 0.8125rem;
        color: #999999
    }

    #handOver .footer-box {
        height: 3rem;
        background: #fff;
        padding: 0.5rem;
    }

    #handOver .footer-box .confirm-btn {
        height: 100%;
        width: 100%;
        background: #0EB295;
        border-radius: 5px;
        border: #0EB295;
        color: #fff;
        font-size: 1.0625rem;
    }

    #handOver .operation-mode .van-cell {
        font-size: 0.8125rem;
        color: #333333;
    }

    #handOver .operation-mode .van-cell__value {
        font-weight: bold;
    }

    #handOver .operation-mode .van-row {
        padding: 10px;
        color: #333333;
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
    }
</style>